import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Sidebar from './Sidebar';
import Header from './Header';
import { cn } from '@/lib/utils';
import { useTheme } from '@/hooks/useTheme';
import { getConfig } from '@/config/app.config';

interface LayoutProps {
  children: React.ReactNode;
  className?: string;
}

export default function Layout({ children, className = '' }: LayoutProps) {
  const { isDark } = useTheme();
  const [config, setConfig] = useState<{ name: string; version: string; environment: string }>({
    name: 'KZ DevOps',
    version: '1.0.0',
    environment: 'development'
  });

  useEffect(() => {
    const loadConfig = async () => {
      try {
        const appConfig = await getConfig();
        setConfig(appConfig.app);
      } catch (error) {
        console.warn('加载配置失败，使用默认配置');
      }
    };

    loadConfig();
  }, []);
  
  return (
    <div className="min-h-screen bg-gray-50 dark:bg-gray-800 flex flex-col">
      {/* 固定的顶部导航栏 */}
      <Header className="fixed top-0 left-0 right-0 z-30" />
      
      {/* 固定的左侧菜单栏和可滚动的主内容区域 */}
      <div className="flex pt-16 h-[calc(100vh-40px)]">
        {/* 固定的左侧菜单栏 */}
        <Sidebar className="fixed top-16 left-0 bottom-0 w-60 z-20" />
        
         {/* 可滚动的主内容区域 */}
        <main className={cn("flex-1 pl-4 pr-4 pt-7 pb-4 overflow-y-auto bg-white dark:bg-gray-900", className)}>
          {children}
        </main>
      </div>
      
      {/* 固定的底部版权信息 */}
      <footer className="fixed bottom-0 left-0 right-0 py-3 px-6 bg-gray-50 dark:bg-gray-800 text-center text-sm text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700 z-30">
        <div className="flex justify-between items-center">
          <div className="text-xs leading-none">
            {config.name} v{config.version} ({config.environment}) © 2025 版权所有
          </div>
          <div className="flex space-x-4 items-center">
            <Link to="/terms" className="hover:text-blue-600 text-xs leading-none">使用条款</Link>
            <Link to="/privacy" className="hover:text-blue-600 text-xs leading-none">隐私政策</Link>
            <Link to="/help" className="hover:text-blue-600 text-xs leading-none">帮助中心</Link>
            <Link to="/feedback" className="hover:text-blue-600 text-xs leading-none">意见反馈</Link>
          </div>
        </div>
      </footer>
    </div>
  );
}